<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie ie7 lt-ie9 lt-ie8"        lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie ie8 lt-ie9"               lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="ie ie9"                      lang="en"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-ie">
<!--<![endif]-->

<head>
   <!-- Meta-->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
   <meta name="description" content="">
   <meta name="keywords" content="">
   <meta name="author" content="">
   <title>BeAdmin - Bootstrap Admin Theme</title>
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
   <!-- Bootstrap CSS-->
   <link rel="stylesheet" href="app/css/bootstrap.css">
   <!-- Vendor CSS-->
   <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="vendor/animo/animate+animo.css">
   <link rel="stylesheet" href="vendor/csspinner/csspinner.min.css">
   <!-- START Page Custom CSS-->
   <!-- END Page Custom CSS-->
   <!-- App CSS-->
   <link rel="stylesheet" href="app/css/app.css">
   <!-- Modernizr JS Script-->
   <script src="vendor/modernizr/modernizr.js" type="application/javascript"></script>
   <!-- FastClick for mobiles-->
   <script src="vendor/fastclick/fastclick.js" type="application/javascript"></script>
</head>

<body>
   <!-- START Main wrapper-->
   <div class="wrapper">
      <!-- START Top Navbar-->
      <nav role="navigation" class="navbar navbar-default navbar-top navbar-fixed-top">
         <!-- START navbar header-->
         <div class="navbar-header">
            <a href="index.html" class="navbar-brand">
               <div class="brand-logo">
                  <img src="app/img/logo.png" alt="App Logo" class="img-responsive">
               </div>
               <div class="brand-logo-collapsed">
                  <img src="app/img/logo-single.png" alt="App Logo" class="img-responsive">
               </div>
            </a>
         </div>
         <!-- END navbar header-->
         <!-- START Nav wrapper-->
         <div class="nav-wrapper">
            <!-- START Left navbar-->
            <ul class="nav navbar-nav">
               <li>
                  <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                  <a href="icons.html#" data-toggle-state="aside-collapsed" class="hidden-xs">
                     <em class="fa fa-navicon"></em>
                  </a>
                  <!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
                  <a href="icons.html#" data-toggle-state="aside-toggled" class="visible-xs">
                     <em class="fa fa-navicon"></em>
                  </a>
               </li>
               <!-- START Messages menu (dropdown-list)-->
               <li class="dropdown dropdown-list">
                  <a href="icons.html#" data-toggle="dropdown" data-play="flipInX" class="dropdown-toggle">
                     <em class="fa fa-envelope"></em>
                  </a>
                  <!-- START Dropdown menu-->
                  <ul class="dropdown-menu">
                     <li class="dropdown-menu-header">Unread messages</li>
                     <li class="p-sm">
                        <input type="text" placeholder="Find contacts.." onfocus="javascript:void(0);" class="form-control">
                     </li>
                     <li>
                        <div class="scroll-viewport">
                           <!-- START list group-->
                           <div class="list-group scroll-content">
                              <!-- START list group item-->
                              <a href="icons.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/01.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">5m</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-success circle-md"></span>Greg Lewis</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="icons.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/04.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">3h</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-success circle-md"></span>Constance Cook</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="icons.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/03.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">3h</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-danger circle-md"></span>Cody Barnes</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="icons.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/05.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">4h</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-danger circle-md"></span>Gina Robinson</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="icons.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/06.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">yesterday</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-danger circle-md"></span>Violet Olson</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                           </div>
                           <!-- END list group-->
                        </div>
                     </li>
                     <!-- START dropdown footer-->
                     <li class="p">
                        <a href="icons.html#" class="text-center">
                           <small class="text-primary">More messages</small>
                        </a>
                     </li>
                     <!-- END dropdown footer-->
                  </ul>
                  <!-- END Dropdown menu-->
               </li>
               <!-- END Messages menu (dropdown-list)-->
               <!-- START User avatar toggle-->
               <li>
                  <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                  <a href="icons.html#" data-toggle-state="aside-user">
                     <em class="fa fa-user"></em>
                  </a>
               </li>
               <!-- END User avatar toggle-->
            </ul>
            <!-- END Left navbar-->
            <!-- START Right Navbar-->
            <ul class="nav navbar-nav navbar-right">
               <!-- Search icon-->
               <li>
                  <a href="icons.html#" data-toggle="navbar-search">
                     <em class="fa fa-search"></em>
                  </a>
               </li>
               <!-- Fullscreen-->
               <li>
                  <a href="icons.html#" data-toggle="fullscreen">
                     <em class="fa fa-expand"></em>
                  </a>
               </li>
               <!-- START Alert menu-->
               <li class="dropdown dropdown-list">
                  <a href="icons.html#" data-toggle="dropdown" data-play="flipInX" class="dropdown-toggle">
                     <em class="fa fa-bell"></em>
                     <div class="label label-danger">11</div>
                  </a>
                  <!-- START Dropdown menu-->
                  <ul class="dropdown-menu">
                     <li>
                        <!-- START list group-->
                        <div class="list-group">
                           <!-- list item-->
                           <a href="icons.html#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-twitter fa-2x text-info"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <p class="m0">New followers</p>
                                    <p class="m0 text-muted">
                                       <small>1 new follower</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- list item-->
                           <a href="icons.html#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-envelope fa-2x text-warning"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <p class="m0">New e-mails</p>
                                    <p class="m0 text-muted">
                                       <small>You have 10 new emails</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- list item-->
                           <a href="icons.html#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-tasks fa-2x text-success"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <p class="m0">Pending Tasks</p>
                                    <p class="m0 text-muted">
                                       <small>11 pending task</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- last list item -->
                           <a href="icons.html#" class="list-group-item">
                              <small>More notifications</small>
                              <span class="label label-danger pull-right">14</span>
                           </a>
                        </div>
                        <!-- END list group-->
                     </li>
                  </ul>
                  <!-- END Dropdown menu-->
               </li>
               <!-- END Alert menu-->
               <!-- START Contacts button-->
               <li>
                  <a href="icons.html#" data-toggle-state="offsidebar-open">
                     <em class="fa fa-group"></em>
                  </a>
               </li>
               <!-- END Contacts menu-->
            </ul>
            <!-- END Right Navbar-->
         </div>
         <!-- END Nav wrapper-->
         <!-- START Search form-->
         <form role="search" action="search.html" class="navbar-form">
            <div class="form-group has-feedback">
               <input type="text" placeholder="Type and hit Enter.." class="form-control">
               <div data-toggle="navbar-search-dismiss" class="fa fa-times form-control-feedback"></div>
            </div>
            <button type="submit" class="hidden btn btn-default">Submit</button>
         </form>
         <!-- END Search form-->
      </nav>
      <!-- END Top Navbar-->
      <!-- START aside-->
      <aside class="aside">
         <!-- START Sidebar (left)-->
         <nav class="sidebar">
            <!-- START user info-->
            <div class="item user-block">
               <!-- User picture-->
               <div class="user-block-picture">
                  <div class="user-block-status">
                     <img src="app/img/user/02.jpg" alt="Avatar" width="60" height="60" class="img-thumbnail img-circle">
                     <div class="circle circle-success circle-lg"></div>
                  </div>
                  <!-- Status when collapsed-->
               </div>
               <!-- Name and Role-->
               <div class="user-block-info">
                  <span class="user-block-name item-text">Welcome User</span>
                  <span class="user-block-role">UX-Dev</span>
               </div>
            </div>
            <!-- END user info-->
            <ul class="nav">
               <!-- START Menu-->
               <li class="nav-heading">Main navigation</li>
               <li>
                  <a href="index.html" title="Dashboard" data-toggle="" class="no-submenu">
                     <em class="fa fa-dot-circle-o"></em>
                     <div class="label label-primary pull-right">10</div>
                     <span class="item-text">Dashboard</span>
                  </a>
               </li>
               <li>
                  <a href="widgets.html" title="Widgets" data-toggle="" class="no-submenu">
                     <em class="fa fa-cube"></em>
                     <span class="item-text">Widgets</span>
                  </a>
               </li>
               <li class="active">
                  <a href="icons.html#" title="Elements" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-flask"></em>
                     <span class="item-text">Elements</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse in">
                     <li>
                        <a href="button.html" title="Buttons" data-toggle="" class="no-submenu">
                           <span class="item-text">Buttons</span>
                        </a>
                     </li>
                     <li>
                        <a href="notifications.html" title="Notifications" data-toggle="" class="no-submenu">
                           <span class="item-text">Notifications</span>
                        </a>
                     </li>
                     <li>
                        <a href="spinners.html" title="Spinners" data-toggle="" class="no-submenu">
                           <span class="item-text">Spinners</span>
                        </a>
                     </li>
                     <li>
                        <a href="animations.html" title="Animations" data-toggle="" class="no-submenu">
                           <span class="item-text">Animations</span>
                        </a>
                     </li>
                     <li>
                        <a href="dropdown-animations.html" title="Dropdown" data-toggle="" class="no-submenu">
                           <span class="item-text">Dropdown</span>
                        </a>
                     </li>
                     <li>
                        <a href="panels.html" title="Panels" data-toggle="" class="no-submenu">
                           <span class="item-text">Panels</span>
                        </a>
                     </li>
                     <li>
                        <a href="portlets.html" title="Portlets" data-toggle="" class="no-submenu">
                           <span class="item-text">Portlets</span>
                        </a>
                     </li>
                     <li>
                        <a href="maps.html" title="Maps" data-toggle="" class="no-submenu">
                           <span class="item-text">Maps</span>
                        </a>
                     </li>
                     <li>
                        <a href="grid.html" title="Grid" data-toggle="" class="no-submenu">
                           <span class="item-text">Grid</span>
                        </a>
                     </li>
                     <li>
                        <a href="grid-masonry.html" title="Grid Masonry" data-toggle="" class="no-submenu">
                           <span class="item-text">Grid Masonry</span>
                        </a>
                     </li>
                     <li>
                        <a href="typo.html" title="Typography" data-toggle="" class="no-submenu">
                           <span class="item-text">Typography</span>
                        </a>
                     </li>
                     <li class="active">
                        <a href="icons.html" title="Icons" data-toggle="" class="no-submenu">
                           <div class="label label-primary pull-right">+400</div>
                           <span class="item-text">Icons</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="icons.html#" title="Forms" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-edit"></em>
                     <span class="item-text">Forms</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="form-standard.html" title="Standard" data-toggle="" class="no-submenu">
                           <span class="item-text">Standard</span>
                        </a>
                     </li>
                     <li>
                        <a href="form-extended.html" title="Extended" data-toggle="" class="no-submenu">
                           <span class="item-text">Extended</span>
                        </a>
                     </li>
                     <li>
                        <a href="form-validation.html" title="Validation" data-toggle="" class="no-submenu">
                           <span class="item-text">Validation</span>
                        </a>
                     </li>
                     <li>
                        <a href="form-wizard.html" title="Wizard" data-toggle="" class="no-submenu">
                           <span class="item-text">Wizard</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="icons.html#" title="Charts" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-bar-chart-o"></em>
                     <span class="item-text">Charts</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="chart-flot.html" title="Flot" data-toggle="" class="no-submenu">
                           <span class="item-text">Flot</span>
                        </a>
                     </li>
                     <li>
                        <a href="chart-radial.html" title="Radial" data-toggle="" class="no-submenu">
                           <span class="item-text">Radial</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="icons.html#" title="Tables" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-table"></em>
                     <span class="item-text">Tables</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="table-standard.html" title="Standard" data-toggle="" class="no-submenu">
                           <span class="item-text">Standard</span>
                        </a>
                     </li>
                     <li>
                        <a href="table-extended.html" title="Extended" data-toggle="" class="no-submenu">
                           <span class="item-text">Extended</span>
                        </a>
                     </li>
                     <li>
                        <a href="table-datatable.html" title="DataTables" data-toggle="" class="no-submenu">
                           <span class="item-text">DataTables</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li class="nav-heading">More elements</li>
               <li>
                  <a href="icons.html#" title="Pages" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-file-text-o"></em>
                     <span class="item-text">Pages</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="pages/login.html" title="Login" data-toggle="" class="no-submenu">
                           <span class="item-text">Login</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/signup.html" title="Sign up" data-toggle="" class="no-submenu">
                           <span class="item-text">Sign up</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/recover.html" title="Recover Password" data-toggle="" class="no-submenu">
                           <span class="item-text">Recover Password</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/lock.html" title="Lock" data-toggle="" class="no-submenu">
                           <span class="item-text">Lock</span>
                        </a>
                     </li>
                     <li>
                        <a href="template.html" title="Starter Template" data-toggle="" class="no-submenu">
                           <span class="item-text">Starter Template</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="icons.html#" title="Extras" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-plus"></em>
                     <span class="item-text">Extras</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="mailbox.html" title="Mailbox" data-toggle="" class="no-submenu">
                           <span class="item-text">Mailbox</span>
                        </a>
                     </li>
                     <li>
                        <a href="timeline.html" title="Timeline" data-toggle="" class="no-submenu">
                           <span class="item-text">Timeline</span>
                        </a>
                     </li>
                     <li>
                        <a href="calendar.html" title="Calendar" data-toggle="" class="no-submenu">
                           <span class="item-text">Calendar</span>
                        </a>
                     </li>
                     <li>
                        <a href="invoice.html" title="Invoice" data-toggle="" class="no-submenu">
                           <span class="item-text">Invoice</span>
                        </a>
                     </li>
                     <li>
                        <a href="search.html" title="Search" data-toggle="" class="no-submenu">
                           <span class="item-text">Search</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <!-- START Theme color options-->
               <li>
                  <a href="icons.html#" title="Color options" data-toggle="collapse-next" class="has-submenu">
                     <div class="label label-purple pull-right">4</div>
                     <em class="fa fa-tint"></em>
                     <span class="item-text">Colors</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse">
                     <li>
                        <a href="icons.html#" title="Option 1" data-toggle="load-css" data-uri="app/css/beadmin-theme-a.css" class="no-submenu">
                           <span class="item-text">Alternative 1</span>
                        </a>
                     </li>
                     <li>
                        <a href="icons.html#" title="Option 2" data-toggle="load-css" data-uri="app/css/beadmin-theme-b.css" class="no-submenu">
                           <span class="item-text">Alternative 2</span>
                        </a>
                     </li>
                     <li>
                        <a href="icons.html#" title="Option 3" data-toggle="load-css" data-uri="app/css/beadmin-theme-c.css" class="no-submenu">
                           <span class="item-text">Alternative 3</span>
                        </a>
                     </li>
                     <li>
                        <a href="icons.html#" title="Option 4" data-toggle="load-css" data-uri="app/css/beadmin-theme-d.css" class="no-submenu">
                           <span class="item-text">Alternative 4</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <!-- END Theme color options-->
               <li>
                  <ul class="nav-labels">
                     <li class="nav-heading">Categories</li>
                     <li class="nav-labels-item">
                        <span class="circle circle-lg circle-success"></span><a href="icons.html#">Green</a>
                     </li>
                     <li class="nav-labels-item">
                        <span class="circle circle-lg circle-danger"></span><a href="icons.html#">Red</a>
                     </li>
                     <li class="nav-labels-item">
                        <span class="circle circle-lg circle-info"></span><a href="icons.html#">Skyblue</a>
                     </li>
                     <li class="nav-labels-item">
                        <span class="circle circle-lg circle-warning"></span><a href="icons.html#">Yellow</a>
                     </li>
                  </ul>
               </li>
               <!-- END Menu-->
            </ul>
         </nav>
         <!-- END Sidebar (left)-->
      </aside>
      <!-- End aside-->
      <!-- START aside-->
      <aside class="offsidebar">
         <!-- START Off Sidebar (right)-->
         <nav>
            <div class="p-lg text-center">
               <em class="fa fa-user"></em>
               <strong>Connections</strong>
            </div>
            <ul class="nav">
               <!-- END user info-->
               <li class="p">
                  <div class="form-group has-feedback">
                     <input type="text" placeholder="Search contacts.." class="form-control input-sm">
                     <em class="fa fa-search form-control-feedback text-muted"></em>
                  </div>
               </li>
               <!-- START list title-->
               <li class="p">
                  <small class="text-muted">ONLINE</small>
               </li>
               <!-- END list title-->
               <li>
                  <!-- START User status-->
                  <a href="icons.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-success circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/05.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Laura Sam</strong>
                           <br>
                           <small class="text-muted">Lead, Developer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="icons.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-success circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/06.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Beverley Pierce</strong>
                           <br>
                           <small class="text-muted">Writer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="icons.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-danger circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/07.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Mika Long</strong>
                           <br>
                           <small class="text-muted">System Analyst</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="icons.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-warning circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/08.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Danielle Berry</strong>
                           <br>
                           <small class="text-muted">Developer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
               </li>
               <!-- START list title-->
               <li class="p">
                  <small class="text-muted">OFFLINE</small>
               </li>
               <!-- END list title-->
               <li>
                  <!-- START User status-->
                  <a href="icons.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/09.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Martin Cooper</strong>
                           <br>
                           <small class="text-muted">Designeer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="icons.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/10.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Daniel Curtis</strong>
                           <br>
                           <small class="text-muted">Designer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
               </li>
               <li>
                  <div class="p-lg text-center">
                     <!-- Optional link to list more users-->
                     <a href="icons.html#" title="See more contacts" class="btn btn-purple btn-sm">
                        <strong>Load more..</strong>
                     </a>
                  </div>
               </li>
            </ul>
            <!-- Extra items-->
            <div class="p">
               <p>
                  <small class="text-muted">Tasks completion</small>
               </p>
               <div class="progress progress-xs m0">
                  <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-success progress-80">
                     <span class="sr-only">80% Complete</span>
                  </div>
               </div>
            </div>
            <div class="p">
               <p>
                  <small class="text-muted">Upload quota</small>
               </p>
               <div class="progress progress-xs m0">
                  <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-warning progress-40">
                     <span class="sr-only">40% Complete</span>
                  </div>
               </div>
            </div>
         </nav>
         <!-- END Off Sidebar (right)-->
      </aside>
      <!-- END aside-->
      <!-- START Main section-->
      <section>
         <!-- START Page content-->
         <div class="content-wrapper">
            <h3>Icons
               <small>Font Awesome gives you scalable vector icons that can instantly be customized</small>
            </h3>
            <div id="demo-icons">
               <!-- START #web-application-->
               <section id="web-application">
                  <h4 class="page-header">Web Application Icons</h4>
                  <div class="row list-icon">
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-adjust"></em>fa-adjust</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-anchor"></em>fa-anchor</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-archive"></em>fa-archive</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrows"></em>fa-arrows</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrows-h"></em>fa-arrows-h</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrows-v"></em>fa-arrows-v</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-asterisk"></em>fa-asterisk</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-ban"></em>fa-ban</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bar-chart-o"></em>fa-bar-chart-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-barcode"></em>fa-barcode</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bars"></em>fa-bars</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-beer"></em>fa-beer</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bell"></em>fa-bell</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bell-o"></em>fa-bell-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bolt"></em>fa-bolt</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-book"></em>fa-book</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bookmark"></em>fa-bookmark</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bookmark-o"></em>fa-bookmark-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-briefcase"></em>fa-briefcase</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bug"></em>fa-bug</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-building-o"></em>fa-building-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bullhorn"></em>fa-bullhorn</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bullseye"></em>fa-bullseye</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-calendar"></em>fa-calendar</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-calendar-o"></em>fa-calendar-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-camera"></em>fa-camera</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-camera-retro"></em>fa-camera-retro</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-square-o-down"></em>fa-caret-square-o-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-square-o-left"></em>fa-caret-square-o-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-square-o-right"></em>fa-caret-square-o-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-square-o-up"></em>fa-caret-square-o-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-certificate"></em>fa-certificate</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-check"></em>fa-check</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-check-circle"></em>fa-check-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-check-circle-o"></em>fa-check-circle-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-check-square"></em>fa-check-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-check-square-o"></em>fa-check-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-circle"></em>fa-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-circle-o"></em>fa-circle-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-clock-o"></em>fa-clock-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-cloud"></em>fa-cloud</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-cloud-download"></em>fa-cloud-download</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-cloud-upload"></em>fa-cloud-upload</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-code"></em>fa-code</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-code-fork"></em>fa-code-fork</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-coffee"></em>fa-coffee</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-cog"></em>fa-cog</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-cogs"></em>fa-cogs</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-comment"></em>fa-comment</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-comment-o"></em>fa-comment-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-comments"></em>fa-comments</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-comments-o"></em>fa-comments-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-compass"></em>fa-compass</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-credit-card"></em>fa-credit-card</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-crop"></em>fa-crop</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-crosshairs"></em>fa-crosshairs</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-cutlery"></em>fa-cutlery</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-dashboard"></em>fa-dashboard
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-desktop"></em>fa-desktop</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-dot-circle-o"></em>fa-dot-circle-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-download"></em>fa-download</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-edit"></em>fa-edit
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-ellipsis-h"></em>fa-ellipsis-h</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-ellipsis-v"></em>fa-ellipsis-v</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-envelope"></em>fa-envelope</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-envelope-o"></em>fa-envelope-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-eraser"></em>fa-eraser</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-exchange"></em>fa-exchange</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-exclamation"></em>fa-exclamation</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-exclamation-circle"></em>fa-exclamation-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-exclamation-triangle"></em>fa-exclamation-triangle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-external-link"></em>fa-external-link</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-external-link-square"></em>fa-external-link-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-eye"></em>fa-eye</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-eye-slash"></em>fa-eye-slash</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-female"></em>fa-female</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-fighter-jet"></em>fa-fighter-jet</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-film"></em>fa-film</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-filter"></em>fa-filter</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-fire"></em>fa-fire</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-fire-extinguisher"></em>fa-fire-extinguisher</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-flag"></em>fa-flag</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-flag-checkered"></em>fa-flag-checkered</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-flag-o"></em>fa-flag-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-flash"></em>fa-flash
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-flask"></em>fa-flask</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-folder"></em>fa-folder</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-folder-o"></em>fa-folder-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-folder-open"></em>fa-folder-open</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-folder-open-o"></em>fa-folder-open-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-frown-o"></em>fa-frown-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-gamepad"></em>fa-gamepad</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-gavel"></em>fa-gavel</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-gear"></em>fa-gear
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-gears"></em>fa-gears
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-gift"></em>fa-gift</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-glass"></em>fa-glass</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-globe"></em>fa-globe</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-group"></em>fa-group
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-hdd-o"></em>fa-hdd-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-headphones"></em>fa-headphones</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-heart"></em>fa-heart</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-heart-o"></em>fa-heart-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-home"></em>fa-home</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-inbox"></em>fa-inbox</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-info"></em>fa-info</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-info-circle"></em>fa-info-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-key"></em>fa-key</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-keyboard-o"></em>fa-keyboard-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-laptop"></em>fa-laptop</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-leaf"></em>fa-leaf</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-legal"></em>fa-legal
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-lemon-o"></em>fa-lemon-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-level-down"></em>fa-level-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-level-up"></em>fa-level-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-lightbulb-o"></em>fa-lightbulb-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-location-arrow"></em>fa-location-arrow</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-lock"></em>fa-lock</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-magic"></em>fa-magic</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-magnet"></em>fa-magnet</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-mail-forward"></em>fa-mail-forward
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-mail-reply"></em>fa-mail-reply
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-mail-reply-all"></em>fa-mail-reply-all</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-male"></em>fa-male</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-map-marker"></em>fa-map-marker</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-meh-o"></em>fa-meh-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-microphone"></em>fa-microphone</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-microphone-slash"></em>fa-microphone-slash</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-minus"></em>fa-minus</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-minus-circle"></em>fa-minus-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-minus-square"></em>fa-minus-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-minus-square-o"></em>fa-minus-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-mobile"></em>fa-mobile</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-mobile-phone"></em>fa-mobile-phone
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-money"></em>fa-money</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-moon-o"></em>fa-moon-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-music"></em>fa-music</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-pencil"></em>fa-pencil</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-pencil-square"></em>fa-pencil-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-pencil-square-o"></em>fa-pencil-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-phone"></em>fa-phone</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-phone-square"></em>fa-phone-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-picture-o"></em>fa-picture-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-plane"></em>fa-plane</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-plus"></em>fa-plus</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-plus-circle"></em>fa-plus-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-plus-square"></em>fa-plus-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-plus-square-o"></em>fa-plus-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-power-off"></em>fa-power-off</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-print"></em>fa-print</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-puzzle-piece"></em>fa-puzzle-piece</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-qrcode"></em>fa-qrcode</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-question"></em>fa-question</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-question-circle"></em>fa-question-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-quote-left"></em>fa-quote-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-quote-right"></em>fa-quote-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-random"></em>fa-random</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-refresh"></em>fa-refresh</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-reply"></em>fa-reply</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-reply-all"></em>fa-reply-all</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-retweet"></em>fa-retweet</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-road"></em>fa-road</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rocket"></em>fa-rocket</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rss"></em>fa-rss</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rss-square"></em>fa-rss-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-search"></em>fa-search</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-search-minus"></em>fa-search-minus</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-search-plus"></em>fa-search-plus</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-share"></em>fa-share</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-share-square"></em>fa-share-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-share-square-o"></em>fa-share-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-shield"></em>fa-shield</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-shopping-cart"></em>fa-shopping-cart</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sign-in"></em>fa-sign-in</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sign-out"></em>fa-sign-out</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-signal"></em>fa-signal</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sitemap"></em>fa-sitemap</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-smile-o"></em>fa-smile-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort"></em>fa-sort</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-alpha-asc"></em>fa-sort-alpha-asc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-alpha-desc"></em>fa-sort-alpha-desc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-amount-asc"></em>fa-sort-amount-asc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-amount-desc"></em>fa-sort-amount-desc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-asc"></em>fa-sort-asc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-desc"></em>fa-sort-desc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-down"></em>fa-sort-down
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-numeric-asc"></em>fa-sort-numeric-asc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-numeric-desc"></em>fa-sort-numeric-desc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sort-up"></em>fa-sort-up
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-spinner"></em>fa-spinner</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-square"></em>fa-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-square-o"></em>fa-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-star"></em>fa-star</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-star-half"></em>fa-star-half</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-star-half-empty"></em>fa-star-half-empty
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-star-half-full"></em>fa-star-half-full
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-star-half-o"></em>fa-star-half-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-star-o"></em>fa-star-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-subscript"></em>fa-subscript</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-suitcase"></em>fa-suitcase</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-sun-o"></em>fa-sun-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-superscript"></em>fa-superscript</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-tablet"></em>fa-tablet</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-tachometer"></em>fa-tachometer</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-tag"></em>fa-tag</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-tags"></em>fa-tags</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-tasks"></em>fa-tasks</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-terminal"></em>fa-terminal</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-thumb-tack"></em>fa-thumb-tack</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-thumbs-down"></em>fa-thumbs-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-thumbs-o-down"></em>fa-thumbs-o-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-thumbs-o-up"></em>fa-thumbs-o-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-thumbs-up"></em>fa-thumbs-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-ticket"></em>fa-ticket</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-times"></em>fa-times</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-times-circle"></em>fa-times-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-times-circle-o"></em>fa-times-circle-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-tint"></em>fa-tint</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-toggle-down"></em>fa-toggle-down
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-toggle-left"></em>fa-toggle-left
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-toggle-right"></em>fa-toggle-right
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-toggle-up"></em>fa-toggle-up
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-trash-o"></em>fa-trash-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-trophy"></em>fa-trophy</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-truck"></em>fa-truck</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-umbrella"></em>fa-umbrella</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-unlock"></em>fa-unlock</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-unlock-alt"></em>fa-unlock-alt</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-unsorted"></em>fa-unsorted
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-upload"></em>fa-upload</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-user"></em>fa-user</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-users"></em>fa-users</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-video-camera"></em>fa-video-camera</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-volume-down"></em>fa-volume-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-volume-off"></em>fa-volume-off</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-volume-up"></em>fa-volume-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-warning"></em>fa-warning
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-wheelchair"></em>fa-wheelchair</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-wrench"></em>fa-wrench</div>
                  </div>
               </section>
               <!-- END #web-application-->
               <!-- START #form-control-->
               <section id="form-control">
                  <h4 class="page-header">Form Control Icons</h4>
                  <div class="row list-icon">
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-check-square"></em>fa-check-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-check-square-o"></em>fa-check-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-circle"></em>fa-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-circle-o"></em>fa-circle-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-dot-circle-o"></em>fa-dot-circle-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-minus-square"></em>fa-minus-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-minus-square-o"></em>fa-minus-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-plus-square"></em>fa-plus-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-plus-square-o"></em>fa-plus-square-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-square"></em>fa-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-square-o"></em>fa-square-o</div>
                  </div>
               </section>
               <!-- END #form-control-->
               <!-- START #currency-->
               <section id="currency">
                  <h4 class="page-header">Currency Icons</h4>
                  <div class="row list-icon">
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bitcoin"></em>fa-bitcoin
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-btc"></em>fa-btc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-cny"></em>fa-cny
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-dollar"></em>fa-dollar
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-eur"></em>fa-eur</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-euro"></em>fa-euro
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-gbp"></em>fa-gbp</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-inr"></em>fa-inr</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-jpy"></em>fa-jpy</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-krw"></em>fa-krw</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-money"></em>fa-money</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rmb"></em>fa-rmb
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rouble"></em>fa-rouble
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rub"></em>fa-rub</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-ruble"></em>fa-ruble
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rupee"></em>fa-rupee
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-try"></em>fa-try</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-turkish-lira"></em>fa-turkish-lira
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-usd"></em>fa-usd</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-won"></em>fa-won
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-yen"></em>fa-yen
                        <span class="text-muted">(alias)</span>
                     </div>
                  </div>
               </section>
               <!-- END #currency-->
               <!-- START #text-editor-->
               <section id="text-editor">
                  <h4 class="page-header">Text Editor Icons</h4>
                  <div class="row list-icon">
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-align-center"></em>fa-align-center</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-align-justify"></em>fa-align-justify</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-align-left"></em>fa-align-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-align-right"></em>fa-align-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bold"></em>fa-bold</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chain"></em>fa-chain
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chain-broken"></em>fa-chain-broken</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-clipboard"></em>fa-clipboard</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-columns"></em>fa-columns</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-copy"></em>fa-copy
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-cut"></em>fa-cut
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-dedent"></em>fa-dedent
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-eraser"></em>fa-eraser</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-file"></em>fa-file</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-file-o"></em>fa-file-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-file-text"></em>fa-file-text</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-file-text-o"></em>fa-file-text-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-files-o"></em>fa-files-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-floppy-o"></em>fa-floppy-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-font"></em>fa-font</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-indent"></em>fa-indent</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-italic"></em>fa-italic</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-link"></em>fa-link</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-list"></em>fa-list</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-list-alt"></em>fa-list-alt</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-list-ol"></em>fa-list-ol</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-list-ul"></em>fa-list-ul</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-outdent"></em>fa-outdent</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-paperclip"></em>fa-paperclip</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-paste"></em>fa-paste
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-repeat"></em>fa-repeat</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rotate-left"></em>fa-rotate-left
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-rotate-right"></em>fa-rotate-right
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-save"></em>fa-save
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-scissors"></em>fa-scissors</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-strikethrough"></em>fa-strikethrough</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-table"></em>fa-table</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-text-height"></em>fa-text-height</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-text-width"></em>fa-text-width</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-th"></em>fa-th</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-th-large"></em>fa-th-large</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-th-list"></em>fa-th-list</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-underline"></em>fa-underline</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-undo"></em>fa-undo</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-unlink"></em>fa-unlink
                        <span class="text-muted">(alias)</span>
                     </div>
                  </div>
               </section>
               <!-- END #text-editor-->
               <!-- START #directional-->
               <section id="directional">
                  <h4 class="page-header">Directional Icons</h4>
                  <div class="row list-icon">
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-angle-double-down"></em>fa-angle-double-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-angle-double-left"></em>fa-angle-double-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-angle-double-right"></em>fa-angle-double-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-angle-double-up"></em>fa-angle-double-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-angle-down"></em>fa-angle-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-angle-left"></em>fa-angle-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-angle-right"></em>fa-angle-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-angle-up"></em>fa-angle-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-circle-down"></em>fa-arrow-circle-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-circle-left"></em>fa-arrow-circle-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-circle-o-down"></em>fa-arrow-circle-o-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-circle-o-left"></em>fa-arrow-circle-o-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-circle-o-right"></em>fa-arrow-circle-o-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-circle-o-up"></em>fa-arrow-circle-o-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-circle-right"></em>fa-arrow-circle-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-circle-up"></em>fa-arrow-circle-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-down"></em>fa-arrow-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-left"></em>fa-arrow-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-right"></em>fa-arrow-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrow-up"></em>fa-arrow-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrows"></em>fa-arrows</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrows-alt"></em>fa-arrows-alt</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrows-h"></em>fa-arrows-h</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrows-v"></em>fa-arrows-v</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-down"></em>fa-caret-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-left"></em>fa-caret-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-right"></em>fa-caret-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-square-o-down"></em>fa-caret-square-o-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-square-o-left"></em>fa-caret-square-o-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-square-o-right"></em>fa-caret-square-o-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-square-o-up"></em>fa-caret-square-o-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-caret-up"></em>fa-caret-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chevron-circle-down"></em>fa-chevron-circle-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chevron-circle-left"></em>fa-chevron-circle-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chevron-circle-right"></em>fa-chevron-circle-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chevron-circle-up"></em>fa-chevron-circle-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chevron-down"></em>fa-chevron-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chevron-left"></em>fa-chevron-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chevron-right"></em>fa-chevron-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-chevron-up"></em>fa-chevron-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-hand-o-down"></em>fa-hand-o-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-hand-o-left"></em>fa-hand-o-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-hand-o-right"></em>fa-hand-o-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-hand-o-up"></em>fa-hand-o-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-long-arrow-down"></em>fa-long-arrow-down</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-long-arrow-left"></em>fa-long-arrow-left</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-long-arrow-right"></em>fa-long-arrow-right</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-long-arrow-up"></em>fa-long-arrow-up</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-toggle-down"></em>fa-toggle-down
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-toggle-left"></em>fa-toggle-left
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-toggle-right"></em>fa-toggle-right
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-toggle-up"></em>fa-toggle-up
                        <span class="text-muted">(alias)</span>
                     </div>
                  </div>
               </section>
               <!-- END #directional-->
               <!-- START #video-player-->
               <section id="video-player">
                  <h4 class="page-header">Video Player Icons</h4>
                  <div class="row list-icon">
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-arrows-alt"></em>fa-arrows-alt</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-backward"></em>fa-backward</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-compress"></em>fa-compress</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-eject"></em>fa-eject</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-expand"></em>fa-expand</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-fast-backward"></em>fa-fast-backward</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-fast-forward"></em>fa-fast-forward</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-forward"></em>fa-forward</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-pause"></em>fa-pause</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-play"></em>fa-play</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-play-circle"></em>fa-play-circle</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-play-circle-o"></em>fa-play-circle-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-step-backward"></em>fa-step-backward</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-step-forward"></em>fa-step-forward</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-stop"></em>fa-stop</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-youtube-play"></em>fa-youtube-play</div>
                  </div>
               </section>
               <!-- END #video-player-->
               <!-- START #brand-->
               <section id="brand">
                  <h4 class="page-header">Brand Icons</h4>
                  <div class="alert alert-success">
                     <ul class="margin-bottom-none padding-left-lg">
                        <li>All brand icons are trademarks of their respective owners.</li>
                        <li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
                     </ul>
                  </div>
                  <div class="row list-icon">
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-adn"></em>fa-adn</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-android"></em>fa-android</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-apple"></em>fa-apple</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bitbucket"></em>fa-bitbucket</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bitbucket-square"></em>fa-bitbucket-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-bitcoin"></em>fa-bitcoin
                        <span class="text-muted">(alias)</span>
                     </div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-btc"></em>fa-btc</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-css3"></em>fa-css3</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-dribbble"></em>fa-dribbble</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-dropbox"></em>fa-dropbox</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-facebook"></em>fa-facebook</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-facebook-square"></em>fa-facebook-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-flickr"></em>fa-flickr</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-foursquare"></em>fa-foursquare</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-github"></em>fa-github</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-github-alt"></em>fa-github-alt</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-github-square"></em>fa-github-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-gittip"></em>fa-gittip</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-google-plus"></em>fa-google-plus</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-google-plus-square"></em>fa-google-plus-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-html5"></em>fa-html5</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-instagram"></em>fa-instagram</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-linkedin"></em>fa-linkedin</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-linkedin-square"></em>fa-linkedin-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-linux"></em>fa-linux</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-maxcdn"></em>fa-maxcdn</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-pagelines"></em>fa-pagelines</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-pinterest"></em>fa-pinterest</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-pinterest-square"></em>fa-pinterest-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-renren"></em>fa-renren</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-skype"></em>fa-skype</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-stack-exchange"></em>fa-stack-exchange</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-stack-overflow"></em>fa-stack-overflow</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-trello"></em>fa-trello</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-tumblr"></em>fa-tumblr</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-tumblr-square"></em>fa-tumblr-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-twitter"></em>fa-twitter</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-twitter-square"></em>fa-twitter-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-vimeo-square"></em>fa-vimeo-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-vk"></em>fa-vk</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-weibo"></em>fa-weibo</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-windows"></em>fa-windows</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-xing"></em>fa-xing</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-xing-square"></em>fa-xing-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-youtube"></em>fa-youtube</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-youtube-play"></em>fa-youtube-play</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-youtube-square"></em>fa-youtube-square</div>
                  </div>
               </section>
               <!-- END #brand-->
               <!-- START #medical-->
               <section id="medical">
                  <h4 class="page-header">Medical Icons</h4>
                  <div class="row list-icon">
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-ambulance"></em>fa-ambulance</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-h-square"></em>fa-h-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-hospital-o"></em>fa-hospital-o</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-medkit"></em>fa-medkit</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-plus-square"></em>fa-plus-square</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-stethoscope"></em>fa-stethoscope</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-user-md"></em>fa-user-md</div>
                     <div class="col-md-3 col-sm-4">
                        <em class="fa fa-wheelchair"></em>fa-wheelchair</div>
                  </div>
               </section>
               <!-- END #medical-->
            </div>
         </div>
         <!-- END Page content-->
      </section>
      <!-- END Main section-->
   </div>
   <!-- END Main wrapper-->
   <!-- START Scripts-->
   <!-- Main vendor Scripts-->
   <script src="vendor/jquery/jquery.min.js"></script>
   <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
   <!-- Plugins-->
   <script src="vendor/chosen/chosen.jquery.min.js"></script>
   <script src="vendor/slider/js/bootstrap-slider.js"></script>
   <script src="vendor/filestyle/bootstrap-filestyle.min.js"></script>
   <!-- Animo-->
   <script src="vendor/animo/animo.min.js"></script>
   <!-- Sparklines-->
   <script src="vendor/sparklines/jquery.sparkline.min.js"></script>
   <!-- Slimscroll-->
   <script src="vendor/slimscroll/jquery.slimscroll.min.js"></script>
   <!-- Store + JSON-->
   <script src="vendor/store/store+json2.min.js"></script>
   <!-- ScreenFull-->
   <script src="vendor/screenfull/screenfull.min.js"></script>
   <!-- START Page Custom Script-->
   <!-- END Page Custom Script-->
   <!-- App Main-->
   <script src="app/js/app.js"></script>
   <!-- END Scripts-->
</body>

</html>